import React from 'react';

interface SubmitButtonProps {
  isLoading: boolean;
  loadingText: string;
  buttonText: string;
}

const SubmitButton: React.FC<SubmitButtonProps> = ({ isLoading, loadingText, buttonText }) => {
  return (
    <button
      type="submit"
      disabled={isLoading}
      className="relative flex w-full justify-center rounded-md border-none px-4 py-3 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 disabled:cursor-not-allowed"
      style={{
        background: isLoading ? '#9DBFF9' : 'linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',
      }}
    >
      {isLoading ? (
        <div className="flex items-center">
          <svg
            className="text-white-500 mr-3 h-5 w-5 animate-spin"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
          <span className="animate-pulse">{loadingText}</span>
        </div>
      ) : (
        buttonText
      )}
    </button>
  );
};

export default SubmitButton;
